import React, { useEffect, useState } from 'react';
import s from './style.module.less';
import moment from 'moment';
import { Datetime } from '@knownsec/react-component';
import CheckboxGroup from '@/components/CheckboxGroup';

export default function ComfirmDiv({ title, setVal, cdate, ctype }) {
  const dateFormat = 'YYYY-MM-DD';

  const typeMap = [
    { label: '操作日志', value: 'operation' },
    { label: '登录日志', value: 'login' },
    // { label: '系统日志', value: 'system' },
  ];
  const [comfirmDate, setDate] = useState(cdate || ['', '']);
  // const [comfirmDate, setDate] = useState(['', '']);
  const [comfirmType, setComfirmType] = useState(ctype || { operation: true, login: true });
  const disabledate = (current) => {
    return current > moment() || current < moment().subtract(6, 'month');
  };
  const setComfirm = (val, type) => {
    if (type === 'date') {
      let d = [].concat(val);
      // d.push(val[0].format(dateFormat));
      // d.push(val[1].format(dateFormat));
      setDate(d);
      console.log('d', d);
      console.log('date', comfirmDate);
    } else {
      setComfirmType(Object.assign({}, val));
      console.log('val', val);
      console.log(comfirmType);
    }
    setVal(val, type);
  };
  useEffect(() => {
    // getTableData(page, pageSize);
  }, []);
  return (
    <div className={s.comfirms}>
      <div className={s.formitem}>
        <span>选择{title}日期</span>
        <Datetime
          disabledDate={disabledate}
          // showTime={false}
          // semiYear
          className={s.radiu}
          value={comfirmDate}
          // format={dateFormat}
          onChange={(val) => setComfirm(val, 'date')}
        />
      </div>
      <div className={s.formitem}>
        <span>选择日志类型</span>
        <CheckboxGroup
          options={typeMap}
          checked={comfirmType}
          onChange={(e) => setComfirm(e, 'type')}
        ></CheckboxGroup>
      </div>
    </div>
  );
}
